<template>
	<div class="c-container" @click="jump(book.id)">
		<img :src="book.image" alt="">
		<div class="description">
			<div class="title">{{book.title}}</div>
			<div class="author">{{book.author}}</div>
			<div class="foot">
				<div class="footer">{{book.fav_nums}} 喜欢</div>
			</div>
		</div>
	</div>
</template>
<script>
//使用v-for报错的小问题，template v-for最外层需有个包裹块
export default{
	name:`book`,
	data(){
		return{
			show:false
		}
	},
	props:{
		book:Object
	},
	watch:{
		// book(){
		// 	this.show=true
		// }
	},
	methods:{
		jump(id){
			this.$router.push('book-detail/'+id)
		}
	}
}
</script>
<style lang="stylus" scoped>
.c-container{margin-top: 15px;display: flex;flex-direction: column;position: relative;box-shadow: 2px 2px 3px #e3e3e3;width: 120px;height:180px;margin-bottom: 5px;width:43%;}
.c-container img{width: 100%;height: 100%;border-radius: 2px;}
.description {width: 108px;position: absolute;bottom: 0;background-color: #fff;padding: 3px 5px 4px 8px;font-size: 12px;display: flex;flex-direction: column;border-bottom-right-radius: 2px;border-bottom-left-radius: 2px;width:90%;}
.title {margin-top: 5px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.author {font-size: 10px;color: #999999;margin-bottom: 5px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.foot {font-size: 10px;display: flex;flex-direction: row;justify-content: flex-end;}
.footer {color: #666666;}	
</style>